import { View, Text } from '@tarojs/components'
import Taro from '@tarojs/taro'
import { useState } from 'react'
import './MyAchievement.scss'

const MyAchievement = () => {
  const [cardIndex, setCardIndex] = useState(0)

  const goBack = () => {
    Taro.navigateBack()
  }

  const turnOver = (index) => {
    setCardIndex(index)
  }

  const achievements = [
    { title: '摆烂型', count: 10, message: '每次只完成1天计划后就开摆' },
    { title: '稳定输出型', count: 1, message: '多次达成联系保持完成计划一周' },
    { title: '自律型', count: 0, message: '已经连续保持完成计划半个月' },
    { title: '坚守自我型', count: 0, message: '已经连续保持完成计划三个月' },
    { title: '毅力顽强型', count: 0, message: '已经连续保持完成计划6个月' },
    { title: '雷打不动型', count: 0, message: '已经连续保持完成计划1年' }
  ]

  return (
    <View className='myAchievement'>
      <View className='pageTitle'>
        <Text onClick={goBack} className='goBack'>
          {'<'}
        </Text>
        我的勋章
      </View>

      <View className='achievementList'>
        {achievements.map((item, index) => (
          <View key={index} className='achievement-item'>
            {cardIndex === index + 1 ? (
              <View className='card-face card-back' onClick={() => turnOver(0)}>
                <Text className='count'>{item.count}</Text>
                <Text className='message'>{item.message}</Text>
              </View>
            ) : (
              <View className='card-face card-front' onClick={() => turnOver(index + 1)}>
                {item.title}
              </View>
            )}
          </View>
        ))}
      </View>
    </View>
  )
}

export default MyAchievement